<template>
  <div class="home">
    <HomeTop>
      <template #bottom>
        <Search></Search>
      </template>
    </HomeTop>
    <!-- 轮播 -->
    <div class="swipt">
        <el-carousel class="boxwrap" :interval="2000" type="card" height="120px" indicator-position="none">
            <el-carousel-item  class="box">
                <img src="http://fdfs.xmcdn.com/storages/acd5-audiofreehighqps/96/1E/GKwRIUEIDq9OAAFgaAIOuSO5.jpg" alt="">
            </el-carousel-item>
            <el-carousel-item class="box">
                <img src="http://fdfs.xmcdn.com/storages/8df2-audiofreehighqps/3E/B1/GKwRIaIIiCy-AAIuvQI4hZbP.jpg" alt="">
            </el-carousel-item>
            <el-carousel-item class="box">
                <img src="http://fdfs.xmcdn.com/storages/acd5-audiofreehighqps/96/1E/GKwRIUEIDq9OAAFgaAIOuSO5.jpg" alt="">
            </el-carousel-item>
        </el-carousel>
    </div>
    <!-- 导航 -->
    <div class="navList">
      <div @click="goTop" class="nav">
        <img
          class="img"
          src="https://fdfs.xmcdn.com/group56/M09/3B/BD/wKgLgFyQujLCAVYRAAAuwA7DZMg198.png"
          alt=""
        />
        <p class="title">排行榜</p>
      </div>
      <div @click="goCategory" class="nav">
        <img
          class="img"
          src="https://fdfs.xmcdn.com/group60/M02/18/F4/wKgLeVziZxHRlc-lAAAO9ZkPU-I489.png"
          alt=""
        />
        <p class="title">分类</p>
      </div>
      <div @click="goTing" class="nav">
        <img
          class="img"
          src="https://fdfs.xmcdn.com/group57/M0A/3B/D0/wKgLgVyQuqWRZsJtAAAnr8tg4rs307.png"
          alt=""
        />
        <p class="title">听单</p>
      </div>
    </div>
    <!-- 中间大图 -->
    <div class="mainImg">
      <img
        class="Image"
        src="//imagev2.xmcdn.com/group61/M0A/CD/B2/wKgMZl0W1legiUgkAACPrBBFcJ4381.png"
        alt=""
      />
    </div>
    <!-- 新人必听 -->
    <div class="newPeople">
      <p class="peopleTitle">新人必听</p>
      <div class="peopleWrap">
        <div @click="goPlay(item.albumId)" v-for="item in albums" :key="item.albumId" class="peopleCard">
          <div
            class="peopleImg"
            :style="`background-image: url(https://imagev2.xmcdn.com/${item.albumCoverPath});`"
          >
            <div class="peopleImgBottom">
              <div class="iconfont icon-bofang_o-copy"></div>
              <div class="right">
                {{
                  ((item.albumPlayCount / 10000).toFixed(2) as any) < 10000
                    ? `${(item.albumPlayCount / 10000).toFixed(2)}万`
                    : `${(item.albumPlayCount / 100000000).toFixed(2)}亿`
                }}
              </div>
            </div>
          </div>
          <div class="peopleIntroduce">
            {{ item.albumTitle }}
          </div>
        </div>
      </div>

      <!-- 现时免费 -->
      <div class="newPeople">
        <p class="peopleTitle">限时免费</p>
        <div class="freeWrap" v-bind:style="{ 'overflow-x': 'scroll' }">
          <div
            v-for="item in limitedTimeFreeAlbums"
            :key="item.albumId"
            class="peopleCard"
          >
            <div
              class="peopleImg"
              :style="`background-image: url(${item.coverPath});`"
            >
              <div class="peopleImgBottom">
                <div class="iconfont icon-bofang_o-copy"></div>
                <div class="right">
                  {{
                    ((item.playCount / 10000).toFixed(2) as any) < 10000
                      ? `${(item.playCount / 10000).toFixed(2)}万`
                      : `${(item.playCount / 100000000).toFixed(2)}亿`
                  }}
                </div>
              </div>
            </div>
            <div class="peopleIntroduce">
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
    </div> 
    <!--  -->
    <div class="hotDay">
            <div class="hdH1">今日热点</div>
            <div class="hotDayBox" v-for="item in hotTrack" :key="item.albumId">

                <div class="hdbImgBox">
                    <img class="hdbImg" :src="item.albumCoverPath" alt="">
                    <div class="iconBox">
                        <div class="iconfont icon-bofang"></div>
                    </div>
                </div>

                <div class="hdbRight">
                    <div class="hdbrH1">{{ item.title }}</div>
                    <div class="hdbrBottom">
                        <div class="hdbrbLeft">
                            <img class="hdbrblImg" src="../../assets/img/ej.png" alt="">
                            <div class="hdbrblH1">{{ item.anchorName }}</div>
                        </div>
                        <div class="hdbrbRight" v-if="item.anchorName">
                            <img class="hdbrbRImg" src="../../assets/img/rt.png" alt="">
                            <div class="hdbrbRH1">{{ item.playCount }}万</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 播客 -->
        <div class="hotDay">
            <div class="hdH1">播客推荐</div>
            <div class="hotDayBox" v-for="item in hotTrack" :key="item.albumId">

                <div class="hdbImgBox">
                    <img class="hdbImg" :src="item.albumCoverPath" alt="">
                    <div class="iconBox">
                        <div class="iconfont icon-bofang"></div>
                    </div>
                </div>

                <div class="hdbRight">
                    <div class="hdbrH1">{{ item.title }}</div>
                    <div class="hdbrBottom">
                        <div class="hdbrbLeft">
                            <img class="hdbrblImg" src="../../assets/img/ej.png" alt="">
                            <div class="hdbrblH1">{{ item.anchorName }}</div>
                        </div>
                        <div class="hdbrbRight" v-if="item.anchorName">
                            <img class="hdbrbRImg" src="../../assets/img/rt.png" alt="">
                            <div class="hdbrbRH1">{{ item.playCount }}万</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


  </div>

  
</template>

<script setup lang="ts">
import { reqRevision, reqWebSite } from "@/api/home";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const goTop = () => {
    router.push('/top')
}
const goCategory = () => {
    router.push('/category')
}   
const goTing = () => {
    router.push('/ting')
}
const goPlay = (id : number) => {
    // router.push(`/play?id=${id}`)
    router.push({
      path:'/play',
      query :{
        id,
      }
    })
}



// 请求新人必听数据
const albums = ref<any>([]);
const getRevision = async () => {
  let result = await reqRevision(1, 6);
  console.log(result);
  albums.value = result.albums;
};

// 限时免费/今日热点
// 免费
const limitedTimeFreeAlbums = ref<any>();
// 热点
const hotTrack = ref<any>([]);
const getWebSite = async () => {
  let result = await reqWebSite();
  console.log(result);
  hotTrack.value = result.hotTrack.hotTracks;
  limitedTimeFreeAlbums.value = result.limitedFreeAlbum.limitedTimeFreeAlbums;
};

onMounted(() => {
  getRevision();
  getWebSite();
});
</script>

<style lang="scss" scoped>
.home {
  // 轮播
  .swipt {
        height: 130px;
        padding-top: 30px;
    .el-carousel__item h3 {
        color: #475669;
        opacity: 0.25;
        line-height: 100px;
        margin: 0;
        text-align: center;
    }
    .box{
        border-radius: 14px;
        img{
            // object-fit: scale-down; 
            width: 100%;
            height: 100%;
        }
    }
  }

  .navList {
    margin-top: 25px;
    width: 375px;
    height: 54px;
    display: flex;
    justify-content: center;

    .nav {
      width: 103px;
      height: 54px;
      text-align: center;

      .img {
        width: 34px;
        height: 34px;
      }

      .title {
        font-size: 12px;
      }
    }
  }

  .mainImg {
    margin-top: 18px;
    margin-bottom: 8px;

    .Image {
      width: 375px;
      height: 82px;
    }
  }

  .newPeople {
    .peopleTitle {
      font-size: 18px;
      margin: 17px 0px 17px 15px;
    }

    // 上
    .peopleWrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      .peopleCard {
        margin-bottom: 14px;
        height: 130px;

        .peopleImg {
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          width: 104px;
          height: 104px;
          border-radius: 10px;
          position: relative;

          .peopleImgBottom {
            display: flex;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.2);
            position: absolute;
            width: 104px;
            bottom: 0;

            .iconfont {
              font-size: 18px;
              color: white;
            }

            .right {
              font-size: 13px;
              color: white;
            }
          }
        }

        .peopleIntroduce {
          // position: relative;
          width: 104px;
          font-size: 13px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    // 下
    .freeWrap {
      display: flex;

      &::-webkit-scrollbar {
        display: none;
      }

      .peopleCard {
        margin-bottom: 6px;
        margin-right: 12px;
        margin-left: 10px;

        .peopleImg {
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          width: 104px;
          height: 104px;
          border-radius: 10px;
          position: relative;

          .peopleImgBottom {
            display: flex;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.2);
            position: absolute;
            width: 104px;
            bottom: 0;

            .iconfont {
              font-size: 18px;
              color: white;
            }

            .right {
              font-size: 13px;
              color: white;
            }
          }
        }

        .peopleIntroduce {
          width: 104px;
          font-size: 13px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .hotDay {
        margin-top: 37px;

        .hdH1 {
            font-size: 0.48rem;
            font-weight: 800;
            margin-left: 0.43rem;
        }

        .hotDayBox {
            // margin-left: 0.43rem;
            padding-left: 10px;
            margin-top: 0.4rem;
            display: flex;
            margin-bottom: 0.4rem;

            .hdbImgBox {
                width: 70px;
                height: 70px;
                position: relative;

                .iconBox {
                    position: absolute;
                    z-index: 2;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0,0,0,0.4);
                    border-radius: 0.23rem;
                    .icon-bofang {
                        position: absolute;
                        right: 25px;
                        bottom: 23px;
                        font-size: 18px;
                        color: #fff;
                        z-index: 3;
                    }
                }

                .hdbImg {
                    width: 70px;
                    height: 70px;
                    border-radius: 0.23rem;
                    position: absolute;
                }
            }

            .hdbRight {
                margin-left: 20px;
                flex: 1;

                .hdbrH1 {
                    font-size: 0.4266rem;
                }

                .hdbrBottom {
                    display: flex;
                    margin-top: 0.3rem;

                    .hdbrbLeft {
                        display: flex;

                        .hdbrblImg {
                            width: 0.32rem;
                            height: 0.34rem;

                        }

                        .hdbrblH1 {
                            color: #999;
                            font-size: 0.34rem;
                            margin-left: 0.15rem;
                        }
                    }

                    .hdbrbRight {
                        margin-left: 0.3rem;
                        display: flex;

                        .hdbrbRImg {
                            width: 0.32rem;
                            height: 0.34rem;
                        }

                        .hdbrbRH1 {
                            color: #999;
                            font-size: 0.34rem;
                            margin-left: 0.15rem;
                        }
                    }
                }
            }
        }
    }
}
</style>
